<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="/plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="/plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="/plugins/kindeditor/lang/zh_CN.js"></script>

	<link rel="stylesheet" type="text/css" href="/js/bootstrap-fileinput/css/fileinput.css">
	<script type="text/javascript" src="/js/bootstrap-fileinput/js/fileinput.js"></script>
	<script type="text/javascript" src="/js/bootstrap-fileinput/js/locales/zh.js"></script>
      
    
    
</head>

<body class="hold-transition skin-red sidebar-mini" >

			<form id="formId">
            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">

                    <!--tab页-->
                    <div class="nav-tabs-custom">

                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a href="#home" data-toggle="tab">商品基本信息</a>                                                        
                            </li>   
                            <li >
                                <a href="#pic_upload" data-toggle="tab">商品图片</a>                                                        
                            </li>    
                            <li >
                                <a href="#customAttribute" data-toggle="tab" onclick="kuozhan()">扩展属性</a>
                            </li>     
                            <li >
                                <a href="#spec" data-toggle="tab" onclick="Specification()">规格</a>
                            </li>                       
                        </ul>
                        <!--tab头/-->
                        <!--tab内容-->
                        <div class="tab-content">
                            <!--表单内容-->
                            <div class="tab-pane active" id="home">
                                <div class="row data-type">                                  
								   <div class="col-md-2 title">商品分类</div>
		                           	  <div class="col-md-10 data">
		                           	  	<table>
		                           	  		<tr>
		                           	  			<td>
		                           	  				<select class="form-control" id="father" name="category1Id" onchange="chd()">
														<option>请选择</option>
														<option th:each="t : ${item}" th:value="${t.id}"   >[[${t.name}]]</option>
		                           	  				</select>
		                              			</td>
		                              			<td>
		                           	  				<select class="form-control select-sm" id="child" name="category2Id" onchange="ghd()"></select>
		                              			</td>
		                              			<td>
		                           	  				<select class="form-control select-sm" id="grandchild" name="category3Id" onchange="mukuai()"></select>
		                              			</td>
		                              			<td>
													<input type="hidden" id="mk">
		                              			</td>
		                           	  		</tr>
		                           	  	</table>
		                              	
		                              </div>	                              
		                          	  
									
		                           <div class="col-md-2 title">商品名称</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control"  id="goodsName" name="goodsName" placeholder="商品名称" >
		                           </div>
		                           
		                           <div class="col-md-2 title">品牌</div>
		                           <div class="col-md-10 data">
		                              <select class="form-control" id="pin" name="brandId"></select>
		                           </div>
		
								   <div class="col-md-2 title">副标题</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" id="caption" name="caption" placeholder="副标题" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">价格</div>
		                           <div class="col-md-10 data">
		                           	   <div class="input-group">
			                          	   <span class="input-group-addon">¥</span>
			                               <input type="text" class="form-control" id="price" name="price" placeholder="价格" value="">
		                           	   </div>
		                           </div>
		                           
		                           <div class="col-md-2 title editer">商品介绍</div>
                                   <div class="col-md-10 data editer">
                                       <textarea name="introduction"  style="width:800px;height:400px;visibility:hidden;"  ></textarea>
                                   </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">包装列表</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               
		                           	<textarea rows="4"  class="form-control" name="packageList"  placeholder="包装列表"></textarea>
		                           </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">售后服务</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               <textarea rows="4"  class="form-control"  name="saleService"  placeholder="售后服务"></textarea>
		                           </div>                        
                                  
                                    
                                </div>
                            </div>
                            
                            <!--图片上传-->
                            <div class="tab-pane" id="pic_upload">
                                <div class="row data-type">                                  
								 <!-- 颜色图片 -->
								 <div class="btn-group">
					                 <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>
                             		                 
					             </div>
								 
								 <table class="table table-bordered table-striped table-hover dataTable">
					                    <thead>
					                        <tr>
					                            
											    <th class="sorting">颜色</th>
											    <th class="sorting">图片</th>
												<th class="sorting">操作</th>
							            </thead>
					                    <tbody id="tId">
										<input type="hidden" id="tupian" name="itemImages">
					                    </tbody>
								 </table> 
								  
                                </div>
                            </div>
                            <!--扩展属性-->
                            <div class="tab-pane" id="customAttribute">
                                <div class="row data-type" id="textId">

                                </div>
								<input type="hidden" id="kuozhanshuxin" name="customAttributeItems">
                            </div>
							<div class="col-md-2 title">是否启用规格</div>
                            <!--规格-->
                            <div class="tab-pane" id="spec">
                            	<div class="row data-type">

			                        <div class="col-md-10 data">
			                        	<input type="checkbox" >			                           
			                        </div>
                            	</div>
                            	<p>
                            	
                            	<div>
                            	
	                                <div class="row data-type" id="fenleicx">

	                                </div>
									<input type="hidden" id="specificationItems" name="specificationItems">
	                                <div class="row data-type">
	                                	 <table class="table table-bordered table-striped table-hover dataTable">
						                    <thead>
						                        <tr>					                          
												    <th class="sorting">屏幕尺寸</th>
													<th class="sorting">网络制式</th>
												    <th class="sorting">价格</th>
												    <th class="sorting">库存</th>
												    <th class="sorting">是否启用</th>
												    <th class="sorting">是否默认</th>
											    </tr>
								            </thead>
						                    <tbody>
						                      <tr>					                           
										            <td>
										            	4.0
										            </td>
													<td>
										            	3G
										            </td>
										            <td>
										           		<input class="form-control" name="price" placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" name="num" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  <tr>					                           
										            <td>
										            	4.0
										            </td>
													<td>
										            	4G
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  <tr>					                           
													<td>
										            	5.0
										            </td>
													<td>
										            	3G
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  <tr>					                           
													<td>
										            	5.0
										            </td>
													<td>
										            	4G
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>

						                    </tbody>
									 	</table>
	                                </div>
	                            </div>
                            </div>
                        </div>
                        <!--tab内容/-->
						<!--表单内容/-->
                    </div>
                   </div>
                  <div class="btn-toolbar list-toolbar">
				      <button class="btn btn-primary" onclick="insert()"><i class="fa fa-save"></i>保存</button>
				      <button class="btn btn-default" >返回列表</button>
				  </div>
			
            </section>
			</form>
            
            
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">上传商品图片</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped">
		      	<tr>
		      		<td>颜色</td>
		      		<td><input  class="form-control" placeholder="颜色" id="colorId"></td>
		      	</tr>			    
		      	<tr>
		      		<td>商品图片</td>
		      		<td>
						<table >
							<tr>
								<td>
									<input type="file" id="myFile" name="image" multiple>
					            </td>
								<td>
									<input type="hidden" name="rimage" id="uimg">
								</td>
							</tr>
						</table>
		      		</td>
		      	</tr>		      	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" onclick="insertIds()" data-dismiss="modal" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>
            
            <!-- 正文区域 /-->
<script type="text/javascript">

	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="introduction"]', {
			allowFileManager : true,
			afterBlur: function(){this.sync();}


		});
	});

	//父查子
	function chd(){

		var cid = $("#father").val()
		$.ajax({
			url:"/itemcontroller/child",
			type:"post",
			data:{id:cid},
			dataType:"json",
			async:false,
			success:function (tou){
				if(tou.code == 1){
					var set = tou.resout;
					var op = "";
					for (var i = 0; i < set.length; i++) {
						op += '<option value="'+set[i].id+'">'+set[i].name+'</option>'
					}
				$("#child").html(op)
				}else {


				}
			},
			error:function (){
				alert("子节点查询错误")
			}
		})
	}

  	function ghd(){
		var cid = $("#child").val();
		$.ajax({
			url:"/itemcontroller/grandchild",
			type:"post",
			data:{id:cid},
			dataType:"json",
			async:false,
			success:function (tou){
				if(tou.code == 1){
					var set = tou.resout;
					var op = "";
					for (var i = 0; i < set.length; i++) {
						op += '<option value="'+set[i].id+'">'+set[i].name+'</option>'
					}
					$("#grandchild").html(op)
				}else {

				}
			},
			error:function (){
				alert("子节点查询错误")
			}
		})
	}
	function mukuai(){
		var cid = $("#grandchild").val();
		$.ajax({
			url:"/itemcontroller/mukuai",
			type:"post",
			data:{id:cid},
			dataType:"json",
			async:false,
			success:function (tou){
				if(tou.code == 1){
					var set = tou.resout;
					$("#mk").val(set.id);
					pinpai();
				}else {

				}
			},
			error:function (){
				alert("子节点查询错误")
			}
		})
	}

	function pinpai(){
		var bids = $("#mk").val();
		$.ajax({
			url:"/itemcontroller/pinpai",
			type:"post",
			data:{id:bids},
			dataType:"json",
			async:false,
			success:function (tou){
				if(tou.code == 1){
					var set = tou.resout;
					var brand = JSON.parse(set.brandIds);
					var op =""
					for (var i = 0; i < brand.length; i++) {
						op += '<option value="'+brand[i].id+'">'+brand[i].text+'</option>'
					}
					$("#pin").html(op);
				}else {

				}
			},
			error:function (){
				alert("子节点查询错误")
			}
		})
	}

	function insert(){
		guige();
		imagehs();
		geigezj();
		$.ajax({
			url:"/itemcontroller/inserts",
			type:"post",
			dataType:"json",
			data:$("#formId").serialize(),
			async:false,
			success:function (set){
				if(set.code == 1){
					alert(set.massager);
				}else {
					alert(set.massager);
				}
			},
			error:function (){
				alert("增加系统错误")
			}
		})
	}

	function  kuozhan(){

		var id = $("#mk").val();
		$.ajax({
			url:"/itemcontroller/kuozhan",
			type:"post",
			data:{id:id},
			dataType:"json",
			async:false,
			success:function (ri){
				var set = ri.resout;
				var list = JSON.parse(set);
				var o = ""
				for (var i = 0; i < list.length; i++) {
					o += '<div>'
					o += '<div className="col-md-2 title">'+list[i].text+'</div>'
					o += '<div className="col-md-10 data">'
					o += '<input className="form-control" type="hidden" name="text" value="'+list[i].text+'" placeholder="扩展属性">'
					o += '<input className="form-control" name="extenda" placeholder="扩展属性">'
					o += '</div>'
					o += '</div>'

				}
				$("#textId").html(o);
				guige();
			},
			error:function (){
				alert("规格查询扩展属性错误");
			}
		})
	}
	function guige(){
		var s = [];
		var list = $("[name=text]");
		var shuxcin = $("[name=extenda]");
		for (var i = 0; i < list.length; i++) {
			s.push( {text:list[i].value,value:shuxcin[i].value});
		}
		var optionlistjson = JSON.stringify(s);
		$("#kuozhanshuxin").val(optionlistjson);
	}
	$('#myFile').fileinput({
		language: 'zh',
		uploadUrl: "/file/upLoadFile",
		maxFileSize: 10240,
		maxFileCount: 4,
		browseClass: 'btn btn-primary',
		allowedFileExtensions: ["jpg","png","gif"],
		enctype:"multipart/form-date"
	});

	$('#myFile').on('fileuploaded',function (event,data,previewId,index){
		var img = data.response.resout;
		$("#uimg").val(img);
	})
	function insertIds(){
		var src = $("#uimg").val();
		var colorName = $("#colorId").val();
		var as = ""
		as += '<tr id="TrId"><td><input type="text" readonly="readonly" name="colorname" value="'+colorName+'"></td><td>'
		as += '<img name="src" src="'+src+'" width="100px" height="100px"></td>'
		as += '<td>'
		as += '<button type="button" className="btn btn-default" onclick="deleteTr(this)" title="删除"><i className="fa fa-trash-o"></i> 删除</button>'
		as += '</td>'
		as += '</tr>';
		$("#tId").append(as);
	}

	function imagehs(){
		var s = [];
		var list = $("[name=colorname]");
		var shuxcin = $("[name=src]");
		for (var i = 0; i < list.length; i++) {
			s.push( {color:list[i].value,url:shuxcin[i].src});
		}
		var img = JSON.stringify(s);
		$("#tupian").val(img);
	}

	function deleteTr(obj){
		var tr = obj.parentNode.parentNode;
		var table = tr.parentNode;
		table.removeChild(tr);
	}

	function Specification(){
		var ids = $("#mk").val();
		$.ajax({
			url:"/itemcontroller/guige",
			type:"post",
			dataType:"json",
			data:{id :ids},
			async:false,
			success:function (ro){
				var set = ro.resout;
				var list = set.specVOList;
				var o = "";
				for (var i = 0; i < list.length; i++) {
					o += '<div  name="nameId">'
					o += '<div className="col-md-2 title" ><input type="hidden" name="cheNamwe" value="'+list[i].text+'">'+list[i].text+'</input></div>'
					o += '<div className="col-md-10 data">'
					for (var j = 0; j < list[i].options.length; j++) {
						o += '<span>'
						o +='<input type="checkbox" name="checId" value="'+list[i].options[j].optionName+'">'+list[i].options[j].optionName+''
						o += '</span>'
					}
					o += '</div>'
					o += '</div>'
				}
				$("#fenleicx").html(o);
			},
			error:function (){
				alert("规格展示系统错误")
			}
		})
	}

	function geigezj(){
		var g = [];
		var divs = $("[name=nameId]")

		for (var i = 0; i < divs.length; i++) {
			var xiafa =  $(divs[i]).find("div");
			var divname = $(xiafa[0]).find("input").val();
			var dis = $(xiafa[1]).find("input");
			var z = [];
			var s = "";
			for (var j = 0; j < dis.length; j++) {
				if($(dis[j]).prop("checked")){
					z.push($(dis[j]).val())
				}
			}
			//var ss = s.substring(1);

			g.push({attributeName:divname,attributeValue:z});
		}
		var geige = JSON.stringify(g);
		alert(geige)
		$("#specificationItems").val(geige);
	}
</script>
</body>
</html>